import React, { memo, useState } from "react";
import css from './css.module.scss'
import chaxun from '../../../../assets/img/chaxun.png'
import { Input, message, Image } from 'antd';
import { findCertificate } from '../../../../services/home'
import { BASE_URL } from '../../../../services/config'
export default memo(function Certificate(props) {
    const [searchName, setSearchName] = useState('')
    const [searchNumber, setSearchNumber] = useState('')
    const [imgUrl, setImgUrl] = useState('')
    const [fileUrl, setFileUrl] = useState('')
    const [content, setContent] = useState('')
    const handleChangeName = (event) => {
        setSearchName(event.target.value);
    };
    const handDowPdf = () => {
        var downloadElement = document.createElement('a')
        var href =
            BASE_URL + '/oss/downloadOssFile?fileUrl=' + imgUrl
        downloadElement.target = '_blank'
        downloadElement.href = href
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
    }
    const handleChangeNumber = (event) => {
        setSearchNumber(event.target.value);
    };
    const handSearch = async () => {
        if (!searchNumber) {
            message.info(`请输入档案标号!`);
            return
        }
        if (!searchName) {
            message.info(`请输入姓名!`);
            return
        }

        try {
            const res = await findCertificate({
                number: searchNumber,
                licensee: searchName,
            })
            console.log(res.data, '获奖')
            if (res.data) {
                setContent(res.data.name)
                setImgUrl(res.data.imgUrl)
                setFileUrl(res.data.fileUrl)
            } else {
                setContent('未找到数据!')
            }
        } catch (error) {
            setContent(error)
        }

    }
    return (
        <div className={css.certificate_box}>
            <img className={css.search_img} src={chaxun} alt="" />
            <div style={{ width: '211px', margin: '0 auto' }}>
                <Input onChange={handleChangeName} style={{ marginBottom: '24px' }} placeholder="请输入姓名" />
                <Input onChange={handleChangeNumber} placeholder="请输入档案标号" />
                <div onClick={e => handSearch()} className={css.btn}>查询</div>
                <div className={css.content}>
                    {content}
                </div>
                {imgUrl && <div>
                    <Image
                        width={200}
                        src={imgUrl}
                    />
                    <div onClick={e => handDowPdf()} className={css.btn}>下载证书</div></div>}

            </div>
        </div>
    )
})
